<template>
  <div class="data-statistics c6-container">
    <ContentForm>
      <div slot="searchform" class="form-top">
        <form action>
          <p class="form-top-p">
            <el-select v-model="listQuery.unitDeptCode" clearable placeholder="请选择单位" @change="changeDept" @clear="delDept">
              <el-option
                v-for="item in depts"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptNo" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="listQuery.yearMonth"
              placeholder="选择月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              type="month"
              style="width: 170px;"
              class="filter-item"
              size="mini"
              @keyup.enter.native="getListPage" />
          </p>
          <p class="form-top-p">
            <el-select v-model="listQuery.cType" clearable placeholder="请选择6c类型">
              <el-option
                v-for="item in cTypeList"
                :key="item.itemValue"
                :label="item.itemName"
                :value="item.itemValue" />
            </el-select>
          </p>

          <p class="form-top-p">
            <el-select v-model="listQuery.status" collapse-tags clearable placeholder="计划状态">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="listQuery.lineId" collapse-tags clearable placeholder="请选择线路">
              <el-option
                v-for="item in lines"
                :key="item.seclineId"
                :label="item.seclineName"
                :value="item.seclineId" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="listQuery.warnType" collapse-tags clearable placeholder="请选择预警状态">
              <el-option
                v-for="item in warnTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>

          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getlist">查询</el-button>
            <el-button
              type="primary"
              size="mini"
              class="refresh-btn"
              icon="el-icon-refresh"
              @click="reset">重置</el-button>
            <el-upload
              style="float:right;margin-left:10px;"
              with-credentials
              :action="action"
              accept=".xls, .xlsx"
              name="file"
              :headers="headers"
              :on-progress="uploading"
              :show-file-list="false"
              :on-success="uploadSuccess">
              <el-button
                v-permission-button="publicConfig['ITPS-IMPORT']"
                type="success"
                size="mini"
                icon="el-icon-document">导入</el-button>
            </el-upload>
          </p>
        </form>
      </div>
      <div
        slot="valueform"
        class="tableContainer widthPage v-flex-elastic"
        style="height: calc(100%);">
        <div style="height: calc(100% - 70px); display: flex;">
          <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            height="100%"
            style="flex: 1;"
            border
            stripe>
            <el-table-column label="序号" align="center" width="55">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              show-overflow-tooltip
              label="计划状态"
              align="center"
              min-width="150px"
              :formatter="statusFormatter">
              <!-- <template slot-scope="scope">
                <div v-if="scope.row.status === 50" class="overtime-color">{{ row.status }}</div>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="deptName"
              show-overflow-tooltip
              label="单位"
              align="center"
              min-width="150px" />
            <el-table-column show-overflow-tooltip label="编制" align="center">
              <!--              <el-table-column prop="cType" label="6C类型" width="80" align="center" :formatter="cTypeFormatter" />-->
              <el-table-column prop="cType" label="6C类型" width="80" align="center" />
              <el-table-column prop="planDate" sortable label="计划检测日期" width="100" align="center">
                <template slot-scope="scope">{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</template>
              </el-table-column>
              <el-table-column prop="lineName" label="线路" width="150" align="center" />
              <el-table-column prop="directionName" label="行别" width="80" align="center" />
              <el-table-column prop="planBegin" label="计划起站" width="80" align="center" />
              <el-table-column prop="planEnd" label="计划止站" width="80" align="center" />
              <el-table-column prop="planMileage" label="计划检测里程" width="100" align="center" />
              <el-table-column prop="preparedBy" label="编制人" width="80" align="center" />
            </el-table-column>
            <el-table-column show-overflow-tooltip label="审批" align="center">
              <el-table-column prop="approve" label="审批人" width="80" align="center" />
              <el-table-column prop="approvelTime" label="审批时间" width="150" align="center">
                <template slot-scope="scope">{{ parseTime(scope.row.approvelTime) }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="完成情况" align="center">
              <el-table-column prop="actualDate" label="实际执行日期" width="100" align="center">
                <template slot-scope="scope">{{ parseTime(scope.row.actualDate, '{y}-{m}-{d}') }}</template>
              </el-table-column>
              <el-table-column prop="actualBegin" label="实际起站" width="80" align="center" />
              <el-table-column prop="actualEnd" label="实际止站" width="80" align="center" />
              <el-table-column prop="actualMileage" label="实际检测里程" width="100" align="center" />
              <el-table-column prop="completeRate" label="完成度" width="80" align="center" />
            </el-table-column>
            <el-table-column min-width="70" align="center" fixed="right">
              <template slot="header">操作</template>
              <template slot-scope="{row }">
                <el-button class="el-icon-defined" size="mini" @click="view(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="getlist" />
        </div>
        <base-dialog
          class="substation-dialog"
          :show-default-footer="false"
          width="45%"
          :visible.sync="dialog.visible"
          :title="dialog.title"
          :loading="dialog.loading"
          :disabled="dialog.disabled">
          <table
            align="center"
            width="99%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            class="jkbg_div_left_ta4"
            style="background-color: #FFF">
            <tr align="center">
              <td colspan="2">2C计划</td>
            </tr>
            <tr>
              <td class="right">编制</td>
              <td class="left">
                <table class="inTbleStyle" align="center">
                  <tr>
                    <td>编制人:</td>
                    <td>{{ dialog.form.preparedBy }}</td>
                    <td>编制时间:</td>
                    <td>{{ parseTime(dialog.form.preparedDate) }}</td>
                  </tr>
                  <tr>
                    <td>线路:</td>
                    <td>{{ dialog.form.lineName }}</td>
                    <td>行别:</td>
                    <td>{{ dialog.form.directionName }}</td>
                  </tr>
                  <tr>
                    <td>计划起站:</td>
                    <td>{{ dialog.form.planBegin }}</td>
                    <td>计划止战:</td>
                    <td>{{ dialog.form.planEnd }}</td>
                  </tr>
                  <tr>
                    <td>计划检测日期:</td>
                    <td>{{ parseTime(dialog.form.planDate, '{y}-{m}-{d}') }}</td>
                    <td>计划类型:</td>
                    <td>{{ planTypeFormatter(dialog.form.planType) }}</td>
                  </tr>
                  <tr>
                    <td>计划执行部门:</td>
                    <td>{{ dialog.form.planDepartmentName }}</td>
                    <td>检测设备:</td>
                    <td>{{ dialog.form.equipment }}</td>
                  </tr>
                  <tr>
                    <td>计划检测人员:</td>
                    <td>{{ dialog.form.planExecutor }}</td>
                    <td>计划车次:</td>
                    <td>{{ dialog.form.planTrainNum }}</td>
                  </tr>
                  <tr>
                    <td>计划检测里程:</td>
                    <td colspan="3">{{ dialog.form.planMileage }}</td>
                  </tr>
                  <tr>
                    <td>附件:</td>
                    <td colspan="3">{{ dialog.form.enclosure }}</td>
                  </tr>
                  <tr>
                    <td>备注:</td>
                    <td colspan="3">{{ dialog.form.remark }}</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="right">审批</td>
              <td class="left">
                <table class="inTbleStyle" align="center">
                  <tr>
                    <td>审批人:</td>
                    <td>{{ dialog.form.approve }}</td>
                    <td>审批时间:</td>
                    <td>{{ parseTime(dialog.form.approvelTime) }}</td>
                  </tr>
                  <tr>
                    <td>审批结论:</td>
                    <td colspan="3">{{ dialog.form.conclusion }}</td>
                  </tr>
                  <tr>
                    <td>审批意见:</td>
                    <td colspan="3">{{ dialog.form.opinion }}</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="right">执行</td>
              <td class="left">
                <table class="inTbleStyle" align="center">
                  <tr>
                    <td>实际执行部门:</td>
                    <td>{{ dialog.form.actualDepartmentName }}</td>
                    <td>实际执行日期:</td>
                    <td>{{ parseTime(dialog.form.actualDate, '{y}-{m}-{d}') }}</td>
                  </tr>
                  <tr>
                    <td>实际起站:</td>
                    <td>{{ dialog.form.actualBegin }}</td>
                    <td>实际止站:</td>
                    <td>{{ dialog.form.actualEnd }}</td>
                  </tr>
                  <tr>
                    <td>实际检测人员:</td>
                    <td>{{ dialog.form.actualTester }}</td>
                    <td>实际车次:</td>
                    <td>{{ dialog.form.actualTraubNum }}</td>
                  </tr>
                  <tr>
                    <td>实际检测里程:</td>
                    <td colspan="3">{{ dialog.form.actualMileage }}</td>
                  </tr>
                  <tr>
                    <td>备注:</td>
                    <td colspan="3">{{ dialog.form.actualRemark }}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <div align="center" style="margin-top: 20px;">
            <span slot="footer" class="dialog-footer">
              <el-button
                size="medium"
                icon="el-icon-close"
                style="width: 100px; height: 35px; background-color: red; color: #FFFFFF;"
                @click="dialogView.visible = false">关闭</el-button>
            </span>
          </div>
        </base-dialog>
      </div>
    </ContentForm>
    <el-dialog
      title="导入结果"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="dialogResult">
        <span>导入成功，</span>
        <span v-for="(item,index) in dialogResult" :key="index">
          {{ item.name }}
          <label style="color:red">{{ item.value }}</label>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <select-material v-if="selectMaterialVisible" ref="selectMaterial" />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { listPage } from '@/api/cms/Inspection-management/Inspection-plan-management/DetailedPlanManagement'
import { findManageUnitDeptList, railtypeList, getLineList } from '@/api/platform'
import SelectMaterial from './components/selectMaterial'
import { getToken } from '@/utils/auth'
import { getListByTypeCode } from '@/api/cms/basic'
import { getUserInfo } from '@/utils/auth'
import ContentForm from '@/components/ContentForm'
export default {
  name: 'DetailedPlanManagement',
  components: {
    SelectMaterial,
    ContentForm
  },
  data() {
    return {
      unitDeptCode: '',
      parseTime: parseTime,
      isActive: false, // 查看详情
      ishowtan: false, // 左侧小弹窗
      loading: false,
      tableData: [],
      selectMaterialVisible: false,
      tableItemData: [],
      yearQuarterList: [

      ],
      total: 0,
      dialogVisible: false,
      dialogResult: null,
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {
          id: null,
          planCode: null,
          status: null,
          deptId: null,
          cType: null,
          preparedBy: null,
          directionId: null,
          planBegin: null,
          planEnd: null,
          planMileage: null,
          planType: null,
          planDepartmentId: null,
          equipment: null,
          planExecutor: null,
          planTrainNum: null,
          enclosure: null,
          remark: null,
          approve: null,
          approvelTime: null,
          conclusion: null,
          opinion: null,
          actualDepartment: null,
          actualDate: null,
          actualBegin: null,
          actualEnd: null,
          actualTester: null,
          actualTraubNum: null,
          actualMileage: null,
          actualRemark: null,
          completeRate: null,
          deptName: null,
          actualDepartmentName: null,
          lineName: null,
          directionName: null,
          planDepartmentName: null
        }
      },
      depts: [],
      railtypes: [],
      lines: [],
      cTypeList: [
        // { label: '1C', value: '1' },
        // { label: '2C', value: '2' },
        // { label: '4C', value: '4' }
      ],
      warnTypeList: [
        { label: '临近未处理', value: 'danger' },
        { label: '逾期未处理', value: 'warn' }
      ],
      planTypeList: [
        { label: '1C月度计划', value: '1' },
        { label: '2C月度计划', value: '2' },
        { label: '4C月度计划', value: '4' }
      ],
      statusList: [
        { label: '审批通过', value: '10' },
        { label: '已发布', value: '20' },
        { label: '已签收', value: '30' },
        { label: '已执行', value: '40' },
        { label: '计划取消', value: '50' },
        { label: '已上传', value: '70' },
        { label: '已分析', value: '80' }
      ],
      listQuery: {
        unitDeptCode: null,
        cType: null,
        railType: null,
        lineId: null,
        status: null,
        yearMonth: null,
        warnType: null,
        page: 1,
        size: 20
      },
      action: process.env.VUE_APP_BASE_API + '/cms/planDetail/upload',
      // 'http://localhost:10248/cms/JcjcRowDataImportLog/upload',
      // process.env.VUE_APP_BASE_API + '/cms/JcjcRowDataImportLog/upload',
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  watch: {
  },
  mounted() {
    this.initPage()
    this.getlist()
  },
  activated() {
    this.initPage()
    this.getlist()
  },
  methods: {
    changeDept(val) {
      this.unitDeptCode = val
      railtypeList().then(response => {
        this.railtypes = response.data
      })
      getLineList({
        unitDeptCode: val
      }).then((response) => {
        this.lines = response.data
      })
    },
    delDept() {
      getLineList({
        unitDeptCode: null
      }).then((response) => {
        this.lines = response.data
      })
    },
    changeRailType(val) {
      this.getLineList(val)
    },
    delRailType() {
      this.getLineList(null)
    },
    statusFormatter(row, column, cellValue, index) {
      var label = ''
      this.statusList.forEach(item => {
        if (cellValue === item.value) {
          label = item.label
          return label
        }
      })
      return label
    },
    // cTypeFormatter(row, column, cellValue, index) {
    //   var label = ''
    //   this.cTypeList.forEach(item => {
    //     if (cellValue === item.value) {
    //       label = item.label
    //       return label
    //     }
    //   })
    //   return label
    // },
    planTypeFormatter(value) {
      var label = ''
      this.planTypeList.forEach(item => {
        if (value === item.value) {
          label = item.label
          return label
        }
      })
      return label
    },
    initPage() {
      // 获取单位
      if (this.$route.query) {
        this.listQuery.cType = this.$route.query.cType
        this.listQuery.warnType = this.$route.query.warnType
      }
      findManageUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        if (resData.length !== 0) {
          this.depts = response.data
          if (getUserInfo().deptCode !== '01' || getUserInfo().superAccount !== 1) {
            this.unitDeptCode = response.data[0].deptNo
            this.listQuery.unitDeptCode = response.data[0].deptNo
          }
        }
        // this.depts = Object.freeze(resData)
      })

      getListByTypeCode({ typeCode: 'JCJCTYPE' }).then(response => {
        this.cTypeList = Object.freeze(response.data)
      })
    },
    getLineList(val) {
      getLineList({
        unitDeptCode: this.listQuery.unitDeptCode,
        railType: val
      }).then((response) => {
        this.lines = response.data
      })
    },
    view(row) {
      this.selectMaterialVisible = true
      this.$nextTick(() => {
        this.$refs.selectMaterial.init(row)
      })

      // this.currentRow = [row]
      // const dialog = {
      //   title: '详情查看',
      //   visible: true,
      //   disabled: true,
      //   loading: false,
      //   form: JSON.parse(JSON.stringify(row))
      // }
      // this.dialog = Object.assign(this.dialog, dialog)
    },
    reset() {
      this.listQuery = {
        unitDeptCode: null,
        cType: null,
        railType: null,
        lineId: null,
        status: null,
        yearMonth: null,
        warnType: null,
        page: 1,
        size: 20
      }
      this.getlist()
    },
    // 获取列表
    getlist() {
      this.tableData = []
      this.loading = true
      listPage(this.listQuery).then(res => {
        if (res.data) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    uploading() {
      alert('文件正在上传，请稍后查看结果')
    },
    uploadSuccess(response, file, fileList) {
      if (response.status !== 200) {
        this.notifiyError(response.message)
        this.getlist()
      } else {
        var olddata = response.data
        var dialogResultTem = []
        for (const keyitem in olddata) {
          var dialogResultTem2 = {}
          dialogResultTem2.name = keyitem
          dialogResultTem2.value = olddata[keyitem]
          dialogResultTem.push(dialogResultTem2)
        }
        this.dialogResult = dialogResultTem
        this.dialogVisible = !this.dialogVisible
        // this.$alert('导入完成')
        this.getlist()
      }

      // this.getEmergencyDutyDataList() // 查询应急值班信息列表
    }
  }
}
</script>

<style scoped lang="scss">
.remain-color {
  background: #f5f685;
  padding: 5px 10px;
  cursor: pointer;
}
.overtime-color {
  color: #ffffff;
  background: #f44b53;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.jkbg_div_left_ta4 td {
  padding: 4px 2px 4px 0px;
  font-family: "微软雅黑";
  font-size: 15px;
  border: 1px solid #dfe6ec;
  color: #000;
  background-color: #e7f3ff;
}
.jkbg_div_left_ta4 {
  margin-top: 2%;
}

.jkbg_div_left_ta4 td.bg_lan {
  background-color: #e2f1f6;
  word-break: keep-all;
  white-space: pre-wrap;
  white-space: nowrap;
}

.jkbg_div_left_ta4 td.left {
  //width: 10.5%;
  text-align: center;
  background-color: "#FFF";
}

.jkbg_div_left_ta4 td.right {
  //width: 1.5%;
  text-align: center;
}

.inTbleStyle tr td:first-child {
  width: 40px;
}

.inTbleStyle tr td:nth-child(3) {
  width: 30px;
}

.jkbg_div_left_ta4 tr td:first-child {
  width: 30px;
}

.inTbleStyle td {
  padding: 4px 2px 4px 0px;
  font-family: "微软雅黑";
  font-size: 15px;
  border: 0px solid #dfe6ec;
  color: #000;
  background-color: #ffffff;
  width: 30%;
  text-align: left;
}

.el-dialog--center .el-dialog__footer {
  text-align: center;
}
.dialogResult{
  text-align: center;
}
</style>
